<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    {% load static %}
    <script src="{% static 'jQuery-3.5.1.js' %}"></script>
    <link rel="stylesheet" href="{% static 'bootstrap-3.4.1-dist/css/bootstrap.min.css' %}">
    <script src="{% static 'bootstrap-3.4.1-dist/js/bootstrap.min.js' %}"></script>
    <script src="/static/js/csrf.js"></script>

    <style>

    </style>

</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-md-8 col-md-offset-2">

            <div class="panel-body">
                <div class="text-center"><h3> 特别鸣谢作者:{{ file.userinfo.username }}</h3></div>
                <div class="form-group">
                    文件名:
                    <input type="text" value="{{ file.name }}" id="filename" class="form-control">

                </div>
                <div class="form-group">
                    文件描述:
                    <input type="text" value="{{ file.desc }}" id="desc" class="form-control">
                </div>

                <textarea name="" id="id_content01" class="form-control">{{ file_content }}</textarea>
                <div>
                    <p class="text-center"><a href="{{ backe_url }}" class="btn btn-sm btn-block btn-primary">返回上一页</a></p>
                    <div class="pull-right" style="color: #2e6da4">
                        <h3>
                            <div ><!--收藏-->
                                <label for="img_id" id="div_file_id">  <img src="{{ img }}" alt="" id="img_id">({{ file_count }})</label>
                               &nbsp;&nbsp;&nbsp;&nbsp;
                                 <span class="glyphicon glyphicon-save"><a href="/app01/download/file?name={{ file.filename }}&file_id={{file.pk }}">下载</a></span>&nbsp;&nbsp;&nbsp;&nbsp;
                                <span>下载数({{ file.number }})</span>
                            </div>

                        </h3>
                    </div>


                </div>
            </div>
        </div>
    </div>

    {% load static %}
    <script charset="utf-8" src="{% static 'kindeditor/kindeditor-all-min.js' %}"></script>
    <script charset="utf-8" src="{% static 'kindeditor/lang/zh-CN.js' %}"></script>
    <script>
        //以后的js操作都在这里写了，外面不能再包script
        KindEditor.ready(function (K)
        {
            window.editor = K.create('#id_content01',
                {
                height: '350px',
                uploadJson: '/app01/upload/img/',//上传图片的后端的提交路径，由专门的视图函数来处理
                extraFileUploadParams: {//上传文件需要额外的参数,csrf的token
                    'csrfmiddlewaretoken': '{{ csrf_token }}'
                },

            })
        });

        //给收藏设置一个点击事件。
    $('#div_file_id').on('click',function () {

        if('{{ col_file }}'==='no'){ //用户未收藏，现在想收藏该文章
            alert('收藏成功')
            $('#div_file_id>img').attr('src','/static/img/active.png/')

            $.ajax({
                url:'',
                type:'post',
                data:{
                    'operate':true,//代表加入收藏
                    'file_id':'{{ file_id }}',
                },
                success:function (attr) {
                   window.location.reload()//需要刷新后，才能再次使用
                    //因为我们的判断条件是由函数 article_detail发送的col_img
                    //而我们这里发送的是ajax请求，局部刷新，异步请求，原来的col_img不会变，保持一开始访问页面的值。
                    //所以需要刷新来更新col_img的值

                }
            })
        }
        else if('{{ col_file }}'==='yes')//代表用户已经收藏，现在要取消收藏
        {
            alert('取消收藏')
            {#$('#div_img_id').firstChild.attr('src','/static/img/noactive.png/')#}
            $('#div_file_id>img').attr('src','/static/img/noactive.png/')
            $.ajax({
                url:'',
                type:'post',
                data:{
                    'operate':false, //代表取消收藏
                    'file_id':'{{ file_id }}',
                },
                success:function (attr) {
                     window.location.reload()//需要刷新后，才能再次使用

                }
            })
        }

    })

    </script>

</body>
</html>